<template>
	<div class="edit_form">
		<a-modal :visible="visible"
		         title="修改信息"
		         @ok="editFormSubmit"
		         @cancel="cancelClose"
		         cancelText="取消"
		         okText="确定">

			<a-form layout="vertical" :model="editForm" :rules="editFormRules">
				<a-form-item label="姓名" name="nickname">
					<a-input placeholder="请输入姓名" v-model:value="editForm.nickname" />
				</a-form-item>

				<a-form-item label="性别" name="gender">
					<a-radio-group v-model:value="editForm.gender">
						<a-radio value="1">男</a-radio>
						<a-radio value="0">女</a-radio>
					</a-radio-group>
				</a-form-item>

				<a-form-item label="出生日期" name="birthdate" required>
					<a-locale-provider :locale="zh_CN">
						<a-date-picker
							v-model:value="editForm.birthdateCallBack"
							show-time
							type="date"
							placeholder="请选择出生日期"
							format="YYYY-MM-DD"
							style="width: 100%"
							@ok="selectOk"
						/>
					</a-locale-provider>
				</a-form-item>
				<a-form-item label="简介" name="intro">
					<a-textarea v-model:value="editForm.intro" placeholder="请输入简介" :rows="4" />
				</a-form-item>
			</a-form>

		</a-modal>
	</div>
</template>


<script>
import {Form, message} from "ant-design-vue";
import moment from 'moment'
import 'moment/locale/zh-cn'
import zh_CN from 'ant-design-vue/lib/locale-provider/zh_CN';
import { update } from "@/request/api";
moment.locale('zh-cn')
import { watch, getCurrentInstance } from 'vue'
export default {
	name: "EditForm",
	props: {
		visible: Boolean,
		userinfo: Object
	},
	setup(props) {
		const obj = getCurrentInstance();
		watch(
			() => props.userinfo, (newValue, oldValue) => {
				obj.data.editForm.nickname = newValue.nickname
				obj.data.editForm.gender = ""+newValue.gender
				obj.data.editForm.birthdate = newValue.birthdate
				obj.data.editForm.birthdateCallBack = newValue.birthdate
				obj.data.editForm.intro = newValue.intro
			}
		)
	},
	data() {
		return {
			zh_CN,
			editForm: {
				nickname: "",
				gender: "",
				birthdate: "",
				birthdateCallBack: "",
				intro: "",
			},
			editFormRules: {
				nickname: [
					{ required: true, message: '请输入姓名', trigger: 'blur' },
					{ min: 3, max: 5, message: '姓名长度为3-5个字符', trigger: 'blur' },
				],
				gender: [
					{ required: true, message: '请选择性别', trigger: 'blur' },
				],
				birthdate: [
					{ required: true, message: '请选择出生日期', trigger: 'blur' },
				],
				intro: [
					{ max: 255, message: '简介长度不能超过255', trigger: 'blur' },
				],
			}
		}
	},
	methods: {
		getzf(num) {
			if (parseInt(num) < 10) {
				num = '0' + num;
			}
			return num;
		},
		selectOk(dates) {
			let date = new Date(dates);
			let y = date.getFullYear();
			let M = date.getMonth() + 1;
			let d = date.getDate();
			let theDay = `${y.toString()}-${this.getzf(M).toString()}-${this.getzf(d).toString()}`;
			this.editForm.birthdate = theDay
		},
		editFormSubmit() {
			const useForm = Form.useForm;
			let that = this
			const { validate } = useForm(this.editForm, this.editFormRules);
			validate()
				.then(() => {
					let param = that.editForm
					param.member_id = ""+that.userinfo.id
					update(param).then( res => {
						if (res.code == 0) {
							message.success("修改成功");
							that.addMemberForm = {
								nickname: "",
								gender: "",
								birthdate: "",
								birthdateCallBack: "",
								intro: "",
								father_id: "",
								mother_id: ""
							}
							that.$emit('change', false)
						}
					})
				})
				.catch(err => {
					message.error(err.errorFields[0].errors);
				});
		},
		cancelClose() {
			this.$emit('change', false)
		}
	}
}
</script>

<style scoped>

</style>
